<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2020-04-08 20:06:58
 * @LastEditTime: 2020-07-04 10:12:08
 * @FilePath: \client\src\components\TimeLine.vue
 * @Description: 
 -->
<template>
  <div class="main-box">
    <div class="user-info">
      <el-image :src="userInfo.avatarUrl" fit="cover"></el-image>
      <div class="secondary-text">{{userInfo.name}}</div>
    </div>
    <el-timeline>
      <el-timeline-item
        v-for="(item,index) in timeline"
        :key="index"
        :timestamp="item.date"
        placement="top"
      >
        <el-card v-for="(image,index) in item.images" :key="index">
          <div class="flex-start">
            <el-image :src="image.url" fit="cover" :preview-src-list="[image.url]"></el-image>
            <div>
              <h4 @click="$router.push('/details/'+image.id)">{{image.title}}</h4>
              <p>{{image.content}}</p>
              <div class="delete-text" @click="deleteImageById(image.id)">删除</div>
            </div>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";
import request from "@/http/request";
import { State } from "vuex-class";
import UserInfo from "../model/UserInfo";
import TimeItem from "../model/Timeline";
@Component
export default class TimeLine extends Vue {
  timeline: TimeItem[] = [];
  @State userInfo: UserInfo;

  created() {
    this.loadData();
  }

  loadData() {
    request
      .timeline(this.userInfo.id)
      .then(res => {
        if (res.data.code === 0) {
          this.timeline = [];
          if (res.data.data) {
            for (const i of res.data.data) {
              this.timeline.push(TimeItem.create(i));
            }
          } else {
            this.$message({
              showClose: true,
              message: "你还没有上传任何作品哦",
              type: "info"
            });
          }
        } else {
          this.$message({
            showClose: true,
            message: "时间线加载失败",
            type: "error"
          });
        }
      })
      .catch(err => {
        console.log(err);
        this.$message({
          showClose: true,
          message: "时间线加载失败",
          type: "error"
        });
      });
  }
  deleteImageById(id: number) {
    request
      .deleteImage(id)
      .then(res => {
        if (res.data.code === 0) {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success"
          });
          this.loadData();
        } else {
          this.$message({
            showClose: true,
            message: "服务器忙，删除失败",
            type: "error"
          });
        }
      })
      .catch(err => {
        console.log(err);
        this.$message({
          showClose: true,
          message: "服务器忙，删除失败",
          type: "error"
        });
      });
  }
}
</script>

<style lang="scss" scoped>
.main-box {
  height: fit-content;
  .user-info {
    .el-image {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      box-sizing: border-box;
    }
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.el-card {
  margin-bottom: 10px;
  h4 {
    margin-bottom: 8px;
  }
  h4:hover {
    color: #409eff;
    cursor: pointer;
  }
  p {
    color: #909399;
    font-size: 13px;
  }
}
.el-image {
  height: 60px;
  width: 100px;
  display: inline-block;
  margin-right: 20px;
}
.delete-text {
  color: #f56c6c;
  font-size: 13px;
  margin-top: 5px;
  cursor: pointer;
  width: fit-content;
}
.delete-text:hover {
  color: #409eff;
}
</style>>

